<template>
    <div class="app-container">
        <el-form label-width="10px" inline>
            <el-form-item label="">
                <div class="mr-1">
                    <el-radio-group v-model="tabPosition" @change="checkboxHande">
                        <el-radio-button label="top" @click.native="thisYear--">上一年</el-radio-button>
                        <!-- native修饰符：该组件没有点击事件 如果使用了该修饰符 则该事件会变成原生事件 -->
                        <el-radio-button label="right" @click.native="thisYear++">下一年</el-radio-button>
                        <el-radio-button label="year">{{ thisYear }}</el-radio-button>
                    </el-radio-group>
                </div>
            </el-form-item>

            <el-form-item label="">
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label=" ">
                <el-button type="primary">下载表格</el-button>
            </el-form-item>

        </el-form>

        <div class="mt-1" style="height: 725px;">
            <el-table :data="tableData" height="100%">
                <el-table-column prop="date" label="车牌"   align="center">
                </el-table-column>
                <el-table-column label="2023年度车辆[维修/加油]情况" align="center">
                    <el-table-column prop="name" label="1月"   align="center">
                    </el-table-column>
                    <el-table-column prop="province" label="2月"   align="center">
                    </el-table-column>
                    <el-table-column prop="city" label="3月"   align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="4月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="5月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="6月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="7月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="8月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="9月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="10月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="11月"   align="center">
                    </el-table-column>
                    <el-table-column prop="zip" label="12月"   align="center">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

/**
* @author        chenRong
* @time          2023-11-25 15:34:31  星期六
* @description   维修加油报表
**/


export default {
    data() {
        return {
            tabPosition: 'year',
            thisYear: '',//本年年份
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        }
    },
    mounted() {
        const date = new Date()
        this.thisYear = date.getFullYear()
    },
    methods: {
        checkboxHande(val) {
            console.log(val);
            /* if (val == "top") { 
                this.thisYear - 1
                console.log(this.thisYear);
            } */
        }
    }
}
</script>

<style lang="scss" scoped>
/* .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: red;
    border-color: red;
} */

::v-deep .el-table th.el-table__cell > .cell{
    font-size: 18px;
}
</style>